<template>
	<a-modal :title="dialogType == 'add' ? '新增不良池' : '详情'" :width="1500" :visible="visible" :maskClosable="false"
		:confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel">
		<a-spin :spinning="formLoading">
			<a-form :form="form">
				<a-form-item label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<FCOrgRadioGroup1 :filter-types="materialType" v-model="params.orgIdSupplier" />
				</a-form-item>
				<div style="margin: 20px 5px;">
					<a-table ref="table" bordered style="margin-top: 15px;" size="default" :columns="columns"
						:data-source="dataSource">
						<span slot="image" slot-scope="text,record">
							<image-preview1 :images="text" :imageUrl="record.imageUrl" />
						</span>
						<!-- 生产单号 -->
						<span slot="orderNumber" slot-scope="text,record">
							<a-input placeholder="请输入" v-model="record.orderNumber" />
						</span>
						<!-- 数量 -->
						<span slot="num" slot-scope="text,record">
							<a-input-number :min="1" v-model="record.num" />
						</span>
						<!-- 备注 -->
						<span slot="remark" slot-scope="text,record">
							<a-textarea placeholder="请输入" v-model="record.remark" auto-size />
						</span>
						<template slot="operation-title">
							<span>操作</span>
							<a-button type="primary" style="margin-left: 20px" @click="toSelect">
								新增
							</a-button>
						</template>
						<!-- 操作 -->
						<span slot="action" slot-scope="text, record">
							<a-popconfirm title="确定删除当前数据?" ok-text="确定" cancel-text="取消" @confirm="handleDelConfirm(record)">
								<a>删除</a>
							</a-popconfirm>
						</span>
					</a-table>
				</div>
				<a-form-item label="选择寄回方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<!-- <a-radio-group :options="options" default-value="1" v-decorator="['returnMethod', { rules: [{ required: true, message: '请选择寄回方式！' }] }]" /> -->
					<a-radio-group style="width:100%"
						v-decorator="['returnMethod', { rules: [{ required: true, message: '请选择！' }] }]">
						<a-radio :value="1">寄回</a-radio>
						<a-radio :value="2">供应商带回</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="物流信息"
					v-show="form.getFieldValue('returnMethod') == 1">
					<a-input style="width:100%" placeholder="请输入" v-decorator="['logisticsInfo']" />
				</a-form-item>
				<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-textarea placeholder="请输入" v-model="params.remark" :auto-size="{ minRows: 6 }" :maxLength="1000" />
				</a-form-item>
			</a-form>
		</a-spin>
		<selectMaterial ref="selectMaterialRef" @selected="selected" />
	</a-modal>
</template>

<script>
import {
	addNew,//新增新	
} from '@/api/modular/main/badPool'

import { getUrlParam } from '@/utils/util'
import selectMaterial from './selectMaterial.vue'
import FcUpload from '@/components/FCUpload/FcUpload'
import FCOrgRadioGroup1 from '@/components/FcOrgRadioGroup/FCOrgRadioGroup1'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'

export default {
	components: {
		selectMaterial,
		FcUpload,
		FCOrgRadioGroup1
	},
	props: ['materialType'],
	data() {
		return {
			dialogType: '',
			fileList: [],
			selectedObj: {},
			wuImage: "",
			labelCol: {
				xs: { span: 2 },
				sm: { span: 2 }
			},
			wrapperCol: {
				xs: { span: 22 },
				sm: { span: 22 }
			},
			orgTree: [],
			visible: false,
			confirmLoading: false,
			isPackaging: false,
			needDeleteFileUid: null,
			formLoading: false,
			form: this.$form.createForm(this),
			orgTypes: [],
			coverUrl: "",
			route_path: '',
			columns: [
				{
					title: '序号',
					width: '80px',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '料号',
					dataIndex: 'materialCode'
				},
				{
					title: '名称',
					dataIndex: 'materialName'
				},
				{
					title: '规格',
					dataIndex: 'materialModelNumber'
				},
				{
					title: '采购价',
					dataIndex: 'purchasePrice'
				},
				{
					title: '图片',
					dataIndex: 'image',
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '供应商',
					dataIndex: 'orgIdSupplierName'
				},
				{
					title: '采购单号',
					dataIndex: 'orderNumber',
					scopedSlots: { customRender: 'orderNumber' }
				},
				{
					title: '数量',
					dataIndex: 'num',
					scopedSlots: { customRender: 'num' }
				},
				{
					title: '备注',
					dataIndex: 'remark',
					scopedSlots: { customRender: 'remark' }
				},
				{
					align: 'center',
					width: '250px',
					slots: { title: 'operation-title' },
					scopedSlots: { customRender: 'action' }
				}
			],
			params: {
				orgIdSupplier: "",//供应商id
				remark: "",//备注
			},
			dataSource: [],
			options: [
				{ label: '直接寄回', value: '1' },
			]
		}
	},
	created() {
		this.route_path = getUrlParam(this.$route.path).materialType
		console.log("route_path", this.route_path);
	},
	methods: {
		// 初始化方法
		init(dialogType, record) {
			this.dialogType = dialogType
			this.visible = true;

			if (!this.managerOrFinance()) {
				this.columns.splice(4, 1);
			}
			setTimeout(() => {
				this.form.setFieldsValue({
					returnMethod: 1
				})
			}, 300);
		},
		fcsuccess(url) {
			this.form.setFieldsValue({ image: url })
		},
		toSelect() {
			if (!this.params.orgIdSupplier) {
				this.$message.error("请先选择供应商");
				return
			}
			if (this.dataSource.length >= 1) {
				if (this.dataSource[0].orgIdSupplier != this.params.orgIdSupplier) {
					this.$message.error(`请选择相同供应商（ ${this.dataSource[0].orgIdSupplierName} ）`);
					return
				}
			}
			let selectedMaterial = this.dataSource.map(val => {
				return val.materialId
			})
			console.log(selectedMaterial);
			this.$refs.selectMaterialRef.init({
				materialType: this.materialType,
				orgIdSupplier: this.params.orgIdSupplier,
				selectedMaterial: selectedMaterial,
			})
		},
		handleDelConfirm(record) {
			let index = this.dataSource.findIndex(val => val.materialId == record.materialId);
			this.dataSource.splice(index, 1);
		},
		handleFileListStringChange(fileListString) {
			this.form.setFieldsValue({ image: fileListString })
		},
		selected(row) {
			console.log(row);
			this.dataSource.push(row);
		},
		handleSubmit() {
			// let text = this.dialogType == 'edit' ? '编辑' : '新增'
			const { form: { validateFields } } = this
			validateFields((errors, values) => {
				console.log(values);
				if (!errors) {
					if(this.dataSource.length == 0){
						this.$message.error("物料不能为空");
						return
					}
					let list = this.dataSource.filter(val => val.num == null || !val.num);
					console.log(list);

					if (list.length > 0) {
						this.$message.error("不良物料数量为必填");
						return
					}
					let defectivePoolMaterialList = this.dataSource.map(val => {
						return {
							remark: val.remark,
							materialId: val.materialId,
							orderNumber: val.orderNumber,
							num: val.num
						}
					})
					let params = {
						...values,
						remark: this.params.remark,
						materialType: this.materialType,
						orgIdSupplier: this.params.orgIdSupplier,
						defectivePoolMaterialList: defectivePoolMaterialList
					}
					console.log("params-", params);
					addNew(params).then((res) => {
						if (res.success) {
							this.$message.success(`新增成功`)
							this.handleCancel();
							this.confirmLoading = false
							this.$emit('ok', values)
						} else {
							// this.$message.error(res.message)
						}
					}).finally((res) => {
						this.confirmLoading = false
					})
				} else {
					this.confirmLoading = false
				}
			})
		},
		handleCancel() {
			this.params = {
				orgIdSupplier: "",//供应商id
				remark: "",//备注
			}
			this.form.resetFields();
			this.dataSource = [];
			this.visible = false
		},
	}
}
</script>

<style>
.inputDiv {
	width: 100%;
	line-height: 32px;
	cursor: pointer;
	background: #eee;
	border: 1px solid #bbb;
	padding-left: 10px;
}
</style>
